/* 
1 组件创建完毕了 就开始向服务器索取数据
  1 组件创建完毕 -> 找到合适的生命周期
  2 新代码   
 */
Component({

  // 组件的内部数据中
  data: {
    // 接口的根地址
    baseURL: "http://192.168.1.20:3000/",
    // 精选大图
    cover: [],
    // 月份
    month: {},
    // 热门数据
    hots: [],
    // 接口要求的参数对象
    params: {
      skip: 0,
      limit: 12
    },
    // 总的数据
    total: 0
  },

  lifetimes: {
    // 组件创建完毕
    attached: function () {
      // 开始向服务器索取 精选大图 数据  
      this.getCovers();
      // 获取月份模块数据
      this.getMonth();
      // 获取热门数据
      this.getHots();
    },
  },
  // 声明一个methods 存放组件内部自定义函数的入口 
  methods: {
    // 获取精选大图数据 绝对不等于 数据马上回来 
    getCovers() {
      wx.request({
        // url 服务器的地址   指向了老师的现在的这台电脑 
        url: 'http://192.168.1.20:3000/home/cover',
        success: (result) => {
          // 表示数据回来了
          // console.log(result.data.data);
          // 把服务器返回的数组 设置到data中 
          this.setData({
            cover: result.data.data
          })
        }
      });
    },
    // 获取月份数据
    getMonth() {
      // console.log("准备获取月份数据");
      wx.request({
        url: 'http://192.168.1.20:3000/home/month',
        success: (result) => {
          console.log(result);
          // 提取把日期格式处理好 再将它设置到 month中即可
          var newMonth = result.data.data;

          var date = newMonth.date;
          // 1 将它重新转为 正常的日期类型 js 中内置  日期对象 可以直接用
          var newDate = new Date(date);
          // console.log(newDate);
          // 2 获取日期里面 月份 js中需要对月份 + 1 
          var month = newDate.getMonth() + 1;
          console.log(month);
          // 3 获取 几号
          var currentDate = newDate.getDate();
          var msg = currentDate + " / " + month + " 月";

          // 将处理完毕的时间字符串 添加到
          newMonth.monthMsg = msg;

          this.setData({
            month: newMonth
          })
        }
      });


    },
    // 获取热门数据
    getHots() {
      wx.request({
        // url: 'http://192.168.1.20:3000/home/hot?skip=0&limit=12',// 写法 1 
        url: 'http://192.168.1.20:3000/home/hot',// 写法 2 
        data: this.data.params,// 写法2
        success: (result) => {
          this.setData({
            // 将新的12条数据 设置到data中 
            // hots: result.data.data.list
            // 展开运算符 完成了数组合并
            hots: [...this.data.hots, ...result.data.data.list],
            total: result.data.data.total
          })
        }
      });

    },
    // scroll-view标签 滚动条触底事件
    scrolltolower() {
      /* 

      0 为了方便修改我们的数据 将 skip和limit 封装成一个全局对象  修改的时候会比较方便了
      1 分页的时候 每一页的数据是不会改变  limit = 12 
      2 当每一次滚动条触底的时候 需要 重新去加载新的数据
        skip 跳过已经显示的数据 再去加载即可
        skip = skip + 12 

      3 再一次发送请求向后台索取数据即可 
      4 代码有待优化 bug !! 
        1 当数据获取回来了  将数据数组都 合并起来   
        2 没有更多数据
          1 不要再去发送新的请求去获取数据 
            拿 skip 和 总数据做个比较即可 
          2 同时也需要给用户一个友好告诉 它 
       */


      //  0 应该先判断一下有没有更多数据 
      if (this.data.params.skip >= this.data.total) {
        // 没有更多数据了

        // 显示一会之后 自动显示 弹窗 
        wx.showToast({
          title: '没有更多数据了.',
          // 把 图标去除掉
          icon: 'none',
        });
        // 让代码不再往下执行
        return;
      }


      //  1 开始修改skip 
      var params = this.data.params;
      params.skip = params.skip + 12;
      // 1.1 全局接口参数已经发生改变了 那么 
      this.setData({
        params: params
      })
      // 3 重新向后台索取新的数据
      this.getHots();
    }
  }
})
